<template>
  <view :style="colorStyle">
    <block v-if="!loadingPage">
      <x-skeleton
        type="list"
        :loading="true"
        v-for="(item, index, key) in 10"
        :key="key"
      >
        <view>列表</view>
      </x-skeleton>
    </block>
    <view class="sellerModule" v-if="loadingPage">
      <view class="sellerList" v-for="(item, index, key) in list" :key="key">
        <view
          class="sellerBg"
          :style="{
            backgroundImage: `linear-gradient(180deg,transparent 60%,#fff 100%),url(${item.backImg})`,
          }"
        >
        </view>
        <view class="sellerInfo1 flex aitems between">
          <view class="sellerNameModule flex aitems">
            <image
              :src="item.logo"
              mode="aspectFill"
              class="sellerLogo"
            ></image>
            <view class="sellerName">
              <view class="name cfff f32">
                {{ item.name }}
              </view>
              <view class="stars flex aitems">
                <image
                  src="@/static/img7.png"
                  mode="widthFix"
                  v-for="(items, indexs) in item.score"
                  :key="'score' + indexs"
                ></image>
              </view>
            </view>
          </view>
          <view
            class="sellerBtn cfff f28 fontWeight"
            @click.stop="gourl(`/pages/seller/info?id=${item.id}`)"
          >
            进店
          </view>
        </view>
        <view
          class="sellerInfo2 flex aitems"
          v-if="item.goodsList.length !== 0"
        >
          <view
            class="sellerGoodsList"
            v-for="(items, indexs, keys) in item.goodsList"
            :key="keys"
            @click.stop="gourl(`/pages/goods/detail?id=${items.id}`)"
          >
            <view class="sellerGoods">
              <image :src="items.img" mode="aspectFill"></image>
              <view class="price cfff f24"> ￥{{ items.goodsPrice }} </view>
            </view>
            <view class="sellerGoodsName c1F1F1F f28 ellipsis1">
              {{ items.name }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <nodata v-if="list.length == 0" />
    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { sellerPage } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import { getToken } from "../../utils/storage";
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  data() {
    return {
      loadingPage: false,
      total: 0,
      list: [],
      current: 1,
    };
  },
  async onLoad(options) {
    if (getToken()) {
      this.sellerPage();
    }
  },
  methods: {
    async sellerPage() {
      loading();
      let { data } = await sellerPage({
        current: this.current,
        size: 10,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    gourl(url) {
      go(url);
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.sellerPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.sellerPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.sellerModule {
  margin: 30rpx 30rpx 0;

  .sellerList {
    margin: 0 0 30rpx 0;
    padding: 24rpx;
    border-radius: 28rpx;
    background: #fff;
    overflow: hidden;
    position: relative;

    .sellerBg {
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      filter: blur(0px);
      width: 100%;
      height: 320rpx;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
    }

    .sellerInfo1 {
      position: relative;
      z-index: 1;

      .sellerNameModule {
        .sellerLogo {
          width: 82rpx;
          height: 82rpx;
          border-radius: 14rpx;
        }

        .sellerName {
          margin-left: 18rpx;

          .name {
          }

          .stars {
            margin: 10rpx 0 0;

            image {
              width: 24rpx;
              height: 24rpx;
              margin: 0 8rpx 0 0;
            }
          }
        }
      }

      .sellerBtn {
        background: var(--view-theme);
        padding: 12rpx 38rpx;
        border-radius: 36rpx;
      }
    }

    .sellerInfo2 {
      position: relative;
      z-index: 1;
      margin: 24rpx 0 0;

      .sellerGoodsList {
        width: 200rpx;
        margin: 0 20rpx 0 0;

        .sellerGoods {
          position: relative;

          image {
            border-radius: 24rpx;
            width: 200rpx;
            height: 200rpx;
          }

          .price {
            position: absolute;
            border-radius: 20rpx 0px 24rpx 20rpx;
            background: rgba(0, 0, 0, 0.6);
            bottom: 0;
            right: 0;
            padding: 2rpx 20rpx;
          }
        }

        .sellerGoodsName {
          margin: 20rpx 0 0;
        }
      }
    }
  }
}

image {
  display: flex;
}
</style>
